<template>
  <div>
    <div class="list_info">
      <span>拍卖轮次</span>
      <p>第<i>{{current_active_turn}}</i>轮/ 共<i>{{active_turn}}</i>轮</p>
    </div>
    <div class="list_con">
      <dl class="list_title">
        <dd>轮次</dd>
        <dd>出价次数</dd>
        <dd>状态</dd>
        <dd>胜出人</dd>
      </dl>
    </div>
    <div class="user-list"
          v-show="list.length>0">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
            :key="index"
            class="item">
            <dl>
              <dd>第<i>{{item.turn}}</i>轮</dd>
              <dd>{{item.bidding_num}}</dd>
              <dd><span :class="'status'+item.status">{{item.status_name}}</span></dd>
              <dd>{{item.nick_name}}</dd>
            </dl>
        </div>
      </van-list>
      
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import { getRoundList } from '@/api/activity/activityApi'
import Vue from 'vue'
import { List } from 'vant'

Vue.use(List)
export default Vue.extend({
  components: {
    noData
  },
  data() {
    return {
      noData: {
        text: '暂无拍卖轮次',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
        marginTop: '60px'
      },
      current_active_turn: '',
      active_turn: '',
      list: [],

      p: 2,
      loading: false,
      error: false,
      finished: false
    }
  },
  beforeCreate() {
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  created() {
    this.init()
  },
  methods: {
    // 缴纳保证金
    init() {
      const query = this.$route.query
      const params = {
        item_auction_id: query.id,
        p: 1
      }
      this.$loadingWrap.show()
      getRoundList(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.current_active_turn = res.data.current_active_turn
          this.active_turn = res.data.active_turn
          this.list = res.data.lists
          if (this.list.length < 10) {
            this.finished = true
          } else {
            this.onLoad()
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      const query = this.$route.query
      const params = {
        item_auction_id: query.id,
        p: this.p
      }
      getRoundList(params).then(res => {
        this.loading = false
        if (res.data.lists.length) {
          this.list = this.list.concat(...res.data.lists)
          this.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    }
  }
})
</script>

<style lang="scss">
.list_info{
  background: #FFF0F1;
  padding: 33px 30px;
  span{
    display: inline-block;
    font-size: 28px;
  }
  p{
    display: inline-block;
    float: right;
    font-size: 28px;
    i{
      color: #F21228;
    }
  }
}
.list_con{
  font-size: 26px;
  color: #666666;
  line-height: 95px;
  border-bottom: 1px solid #EDEDED;
  padding: 0 30px;
  font-size: 0;
  dd{
    display: inline-block;
    width: 25%;
    font-size: 26px;
    text-align: center;
    &:first-child{
      text-align: left;
      width: 18%;
    }
    &:nth-of-type(3){
      width: 32%;
    }
    &:last-child{
      text-align: right;
    }
  }
}
.user-list{
  font-size: 0;
  dl{
    padding: 0 30px;
    border-bottom: 1px solid #EDEDED;
    dd{
      display: inline-block;
      width: 25%;
      text-align: center;
      line-height: 95px;
      font-size: 26px;
      i{
        color: #F21228;
      }
      &:first-child{
        text-align: left;
        width: 18%;
      }
      &:nth-of-type(3){
        width: 32%;
      }
      &:last-child{
        text-align: right;
      }
      span{
        display:inline;
        &.status1{
          color: #F21228;
        }
        &.status2{
          color: #ff8c10;
        }
        &.status3{
          color: #3EA340;
        }
      }
    }
  }
}
</style>